<template>
  <div class="proList">
    <el-scrollbar class="listBar">
      <div class="top">
        <div></div>
        <h1>搜索结果</h1>
        <el-button type="info" :icon="CloseBold" circle @click="back"></el-button>
      </div>

      <div class="flex flex-wrap gap-4 items-center">
        <el-select
            v-model="value"
            placeholder="选择分类"
            size="large"
            style="width: 240px"
            @change="changeCategory(value)"
        >
          <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.name"
              :value="item.id"
          />
        </el-select>
      </div>

      <el-divider />

      <div class="itemBar">
        <product-list v-if="getDataLoading" :getData="listProductSearch" :param="params" />
      </div>
    </el-scrollbar>
  </div>

</template>

<script setup>
import { ref, defineModel, defineProps } from 'vue'
import {CloseBold} from "@element-plus/icons-vue";
import ProductList from "@/components/product/productList.vue";
import { listProductSearch } from '@/apis/product'
import {listCategory} from "@/apis/category.js";

const props = defineProps({
  param: Object
})

// 选项
const value = ref('')
const options = ref([])

const getDataLoading = ref(true)
const openPromotion = defineModel('openPromotion')

const params = ref(props.param)

const back = () => {
  openPromotion.value = false
}

const getData = async () => {
  listCategory().then(res => {
    options.value.push(...res.rows)
  })
}

getData()

const changeCategory = (id) => {
  console.log(id)
  getDataLoading.value = false
  params.value = { ...{productCategoryId:id}, ...props.param }
  setTimeout(function() {
    getDataLoading.value = true
  }, 500);
}
</script>

<style scoped>
.proList{
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99999;
  height: 100vh;
  width: 205vh;
  background-color: rgba(0,0,0,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
}
.listBar{
  height: 80vh;
  width: 170vh;
  background-color: #fff;
  border-radius: 8px;
  display: flex;
  align-items: center;
  flex-direction: column;
}
.top{
  height: 10vh;
  width: 165vh;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.itemBar{
  min-height: 50vh;
  width: 165vh;
  background-color: #f5f5f5;

  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
</style>
